class MpList extends HTMLElement {
  static get observedAttributes() {
    return ["lefticon", "title", "subtitle"];
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this.render();
  }

  connectedCallback() {
    this.render();
  }

  render() {
    const leftIcon = this.getAttribute("lefticon");
    const title = this.getAttribute("title") || "Title";
    const subtitle = this.getAttribute("subtitle");

    this.shadowRoot.innerHTML = `
        <style>
          @import url('./src/mp-design-tokens/components-styles/Stack.css');
          @import url('./src/mp-design-tokens/components-styles/Icon.css');
          @import url('./src/mp-design-tokens/components-styles/Text.css');
        </style>
        <div class="stack stack-gap-12 stack-horizontal">
          ${
            leftIcon !== null
              ? `
            <div class="stack stack-align-self-center">
              <mp-icon icon="${leftIcon}"></mp-icon>
            </div>
          `
              : ""
          }
          <div class="stack stack-align-items-center stack-width-100 stack-horizontal stack-gap-12">
            <div class="stack stack-width-100 stack-gap-2">
              <mp-text text="${title}" textstyle="body1"></mp-text>
              <mp-text text="${subtitle}" textstyle="caption"></mp-text>
            </div>
            <slot></slot>
          </div>
        </div>
      `;
  }
}

customElements.define("mp-list", MpList);
